<template>
  <view class="swiper-wrapper">
    <view
        v-if="properties.setStyle.swiperType === 0"
        :style="{
                'padding-right': (properties.setStyle.pageMargin+20)+'px',
                'padding-left': (properties.setStyle.pageMargin+20)+'px',
                'padding-top': properties.setStyle.pageMarginTop+'px',
                'padding-bottom': properties.setStyle.pageMarginBottom+'px',
                'border-radius': properties.setStyle.borderRadius+'px'
                }"
    >

      <view style="width: 100%;height: 100%;justify-content: center;display: flex;align-items: center">
        <image class="full-image" mode="widthFix" :style="{'border-radius': properties.setStyle.borderRadius+'px'
          ,height: properties.setStyle.imgHeight,width:properties.setStyle.imgWidth
        }"
               :src="properties.setStyle.imageList[0].src" lazy-load>
        </image>
      </view>

    </view>

    <view v-else
          :style="{
                padding:  properties.setStyle.pageMarginTop+'px '
                + properties.setStyle.pageMargin+'px '
                + properties.setStyle.pageMarginBottom+'px '
                + properties.setStyle.pageMargin+'px ',
                'border-radius': properties.setStyle.borderRadius+'px'
                }"

    >
      <!-- banner 轮播图 -->
      <view class="swiper">
        <swiper :indicator-dots="true" :autoplay="true"

                :circular="circular" :interval="2*1000"
                :duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff"
                :style="{
                           'border-radius': properties.setStyle.borderRadius+'px',
                           'height': '180px',
                        }"
        >
          <block v-for="(item,index) in properties.setStyle.imageList" :key="index">
            <swiper-item :style="{
                           'border-radius': properties.setStyle.borderRadius+'px',
                           'height': '180px',
                        }">
              <navigator :url='item.src' class='slide-navigator acea-row row-between-wrapper'
                         hover-class='none'>
                <image
                    @click="imgClick(item,properties.setStyle.imageList)"
                    mode="scaleToFill"
                    :style="{
                            'height': '180px',
                           'border-radius': properties.setStyle.borderRadius+'px'
                        }"
                    :src="item.src" class="slide-image" :id="'slide-image'+index" lazy-load></image>
              </navigator>
            </swiper-item>
          </block>
        </swiper>

      </view>
    </view>
  </view>
</template>
<script>

export default {
  name: "ImgSwiper",
  data() {
    return {
      slideShows: [], // 轮播图
      circular: true,
      interval: 3000,
      duration: 500,
    }
  },
  props: {
    properties: {
      type: Object,
      default: function () {
        return {
          "component": "pictureads",
          "text": "图片广告",
          "setStyle": {
            "text": "图片广告",
            "swiperType": 1,
            "borderRadius": 10,
            "pageMargin": 11,
            "imageMargin": 0,
            "pagingType": "bullets",
            "rowindividual": 2,
            "imageList": [{
              "src": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6IWFxyAA2wGs8789oAALHsgCzZOAADbAy530.jpg",
              "text": "",
              "http": {}
            },
              {
                "src": "https://git-1304113371.cos.ap-nanjing.myqcloud.com/ChMkJ1bKxu6IWFxyAA2wGs8789oAALHsgCzZOAADbAy530.jpg",
                "text": "",
                "http": {}
              }
            ],
            "pageMarginTop": 10,
            "pageMarginBottom": 10
          }
        }
      }
    },

  },
  methods: {
    imgClick(img, list) {
      if (img.click) {
        if (img.click.type == 2) {
          uni.previewImage({
            current: img.click.link, // 当前显示图片的http链接
            urls: [img.click.link] // 需要预览的图片http链接列表
          });
          return;
        } else if (img.click.type == 1) {
          uni.navigateTo({
            url: img.link
          })
          return;
        }
      }
      let arr = [];
      for (let i = 0; i < list.length; i++) {
        arr[i] = list[i].src;
      }
      uni.previewImage({
        current: img.src, // 当前显示图片的http链接
        urls: arr // 需要预览的图片http链接列表
      });
    },
  },
  onShow() {
    console.log("---", this.properties)
  }
}
</script>

<style scoped lang="scss">

/*轮播*/
.swiper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  /* #ifdef MP */
  z-index: 10;
  /* #endif */
  swiper,
  .swiper-item,
  image {
    width: 100%;
    height: 440rpx;
  }
}

.full-image {
  width: 100%;
  height: 100%;
}

::v-deep .uni-swiper-dots {
  margin-bottom: 10px !important;
}
</style>
